<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue中的set方法</title>
	<script src="vue.js"></script>
</head>
<body>
	<!-- 修改对象 -->
	<!-- 上一节说了, 想修改数据且页面跟着修改, 是直接修改引用的值, 还有一种方法可以, 就是set方法 -->
	<!-- 下面2个方法都可以改变 -->
	<!-- Vue.set(vm.userInfo, 'address', 'beijing') -->
	<!-- vm.$set(vm.userInfo, 'address', 'beijing') -->


	<div id="app">
		<div v-for="(item, key, index) of userInfo">
			{{item}} --- {{key}} --- {{index}}
		</div>
	</div>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				userInfo: {
					name: 'Dell',
					age: 28,
					gender: 'male',
					salary: 'secret'
				}
			}
		})
	</script>

	<hr>
	<!-- 修改数组 -->
	<!-- Vue.set(vm1.userInfo, 1, 5) -->
	<!-- vm.$set(vm1.userInfo, 2, 10) -->
	<div id="app1">
		<div v-for="(item, key) of userInfo">
			{{item}} --- {{key}}
		</div>
	</div>
	<script>
		var vm1 = new Vue({
			el: '#app1',
			data: {
				userInfo: [1,2,3,4]
			}
		})
	</script>

	

</body>
</html>